<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         // CSS 优先级（Specificity）是用于计算选择器的权重，以决定在多个选择器应用到同一个元素时，
         // 哪个样式最终生效。CSS 优先级算法遵循以下规则：
            // 优先级的计算规则
            // CSS 优先级由四个部分构成，通常表示为 (a, b, c, d)，分别对应以下四个部分：
                /**
                 * 1. a: 内联样式（style 属性）——如果元素有内联样式，优先级为 1,0,0,0。
                 * 2. b: ID 选择器——每个 ID 选择器的权重为 0,1,0,0
                 * 3. c: 类选择器、属性选择器、伪类选择器——每个的权重为 0,0,1,0。 （每个）
                 * 4. d: 元素选择器和伪元素选择器——每个的权重为 0,0,0,1。 （每个）
                */
            // 特殊情况
                // 继承的样式：继承的样式优先级最低，无法覆盖任何显式定义的样式。
                // 通配符选择器：如 * 和 :not，权重为 0,0,0,0，不会影响优先级计算。
                // !important 关键字：
                //     !important 会覆盖任何没有使用 !important 的样式，即使它的优先级较低。
                //     如果多个选择器都使用 !important，优先级仍然会根据上述规则进行计算。
    </script>
</body>
</html>